import React from 'react'
import View from 'lib/View.jsx'
import { render } from 'react-dom';
import Layout from '../common/layout.jsx'
import { Router, Route, IndexRoute } from 'react-router';

import SegmentDatePicker from 'lib/components/SegmentDatePicker.jsx'

import RootView from './RootView.jsx'
import AllVersions from '../common/versions.jsx';
import history from '../common/history.es6';

import './style.less';

class Layout2 extends Layout {
  render() {
    return (
      <div>
        <div className="page-title">
          <div className="navbar">
            <ul>
            {
              <li>
                <a
                  className="btn-green btn-sm"
                  style={{
                    marginTop:'5px',
                    fontSize:'14px',
                    padding:'6px 12px'
                  }}
                  href="overview1">
                  切回旧版
                </a>
              </li>
            }
            {
                this.props.hideVersion?null:(
                  <li>
                    <AllVersions
                      appVersionName={BlueWare.appversion}
                      appVersionId={BlueWare.appVersionId}
                      moduleName={BlueWare.module_name}
                    />
                  </li>
                )
              }
              {
                this.props.extra?(
                  <li>
                    {this.props.extra}
                  </li>
                ):null
              }
              {
                this.props.hideTime?null:(
                  <li>
                    <Ts onChange={this.onTimeChange} customSpanLimit={60*60*1000}/>
                  </li>
                )
              }
            </ul>
          </div>
          <h2>{this.props.title}<sub>{this.props.subtitle}</sub></h2>
        </div>
        {this.props.children}
      </div>
    )
  }
}

class MainView extends View {
  render() {
    return (
      <Layout2 title="总览" subtitle="总览应用健康情况" hideTime={true} extra={<SegmentDatePicker style={{float:'right'}} />}>
        { React.cloneElement(this.props.children, { routeParams: this.props.params, key: this.getHandlerKey() }) }
      </Layout2>
    );
  }
}

render((
  <Router history={ history }>
    <Route path="/" component={MainView}>
      <IndexRoute component={RootView} />
    </Route>
  </Router>
), document.getElementById('root'));
